<template>
  <el-form class="image-form" ref="form" size="default" label-position="top" style="width: 100%">
    <el-form-item v-if="currentOperation && currentOperation.hint">
      <div class="panel-hint">
        {{ currentOperation.hint }}
      </div>
    </el-form-item>
    <!-- ranges配置 -->
    <el-form-item :label="rg.name" v-for="rg in currentOperation.ranges" :key="rg.key">
      <el-slider v-model="operationRanges[rg.key]" :min="rg.range[0]" :max="rg.range[1]" />
    </el-form-item>
    <!-- inputs配置 -->
    <el-form-item :label="ipt.name" v-for="ipt of currentOperation.inputs" :key="ipt.key">
      <el-color-picker
        v-if="ipt.type === 'color'"
        v-model="operationInputs[ipt.key]"
        color-format="rgb"
      />
      <el-input
        v-else-if="ipt.type === 'text'"
        size="default"
        v-model="operationInputs[ipt.key]"
        :key="ipt.key"
      />
      <el-input
        v-else-if="ipt.type === 'int'"
        type="number"
        size="default"
        v-model="operationInputs[ipt.key]"
      />
      <div class="input-hint" v-if="ipt.hint">{{ ipt.hint }}</div>
    </el-form-item>
    <!-- options配置 -->
    <template v-if="currentOperation && currentOperation.sure">
      <el-form-item :label="ip.name" v-for="ip in currentOperation.options" :key="ip.key">
        <el-radio-group v-model="operationOptions[ip.key]" size="small">
          <el-radio-button :label="vp" v-for="(vp, v) in ip.values" :key="v" />
        </el-radio-group>
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item :label="ip.name" v-for="ip in currentOperation.options" :key="ip.key">
        <el-button-group size="default">
          <el-button
            @click="doChangeFile(currentOperation.key, ip.key, vp)"
            type="primary"
            v-for="(vp, v) in ip.values"
            :key="v"
          >
            {{ vp }}
          </el-button>
        </el-button-group>
      </el-form-item>
    </template>
    <!-- 上传文件按钮 -->
    <el-form-item
      v-if="
        currentOperation &&
        currentOperation.confirm &&
        currentOperation.operation === 'input_uploader'
      "
    >
      <el-upload
        ref="uploadRef"
        class="upload-demo"
        action="/api/dataio/input_uploader/upload"
        multiple
        name="upload_file"
        v-model:file-list="fileList"
        accept="image/*"
        :disabled="!currentFolder"
        :data="{
          save_dir: currentFolder?.path || 'None',
          event: 'None'
        }"
        :headers="{ token }"
        :auto-upload="false"
        :on-success="uploadSuccess"
      >
        <template #trigger>
          <el-button size="small" type="primary">{{ currentOperation.name }}</el-button>
        </template>
      </el-upload>
    </el-form-item>
    <!-- 确认按钮 -->
    <el-form-item
      v-if="
        currentOperation &&
        ((currentOperation.options.length < 1 && currentOperation.confirm) || currentOperation.sure)
      "
    >
      <el-button type="primary" @click="doChangeFile()">确定</el-button>
    </el-form-item>
    <!-- 显示返回信息 -->
    <el-form-item :label="rt.name" v-for="rt in currentOperation.return" :key="rt.key">
      <div class="return-list" v-for="(v, k) in returnData" :key="k">
        <el-tooltip
          class="item"
          effect="dark"
          :content="k"
          placement="top-end"
          v-if="Object.keys(returnData).length > 1"
        >
          <div class="return-name">
            <span>{{ k }}</span>
          </div>
        </el-tooltip>
        <div class="return-content">
          <template v-for="(s, i) in v.return[rt.key]">
            <span class="return-item" v-if="s" :key="i">{{ s }}</span>
          </template>
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()

export default {
  props: {
    currentOperation: {
      type: Object,
      default: () => ({})
    },
    currentFolder: {
      type: Object,
      default: () => null
    },
    returnData: {
      type: Object,
      default: () => ({})
    },
    ranges: {
      type: Object,
      default: () => ({})
    },
    inputs: {
      type: Object,
      default: () => ({})
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      fileList: [],
      token: wsCache.get('Admin-Token')
    }
  },
  computed: {
    operationRanges: {
      get: function () {
        return this.ranges
      },
      set: function (value) {
        this.$emit('update:ranges', value)
      }
    },
    operationInputs: {
      get: function () {
        return this.inputs
      },
      set: function (value) {
        this.$emit('update:inputs', value)
      }
    },
    operationOptions: {
      get: function () {
        return this.options
      },
      set: function (value) {
        this.$emit('update:options', value)
      }
    }
  },
  methods: {
    // 文件上传成功
    async uploadSuccess() {
      this.fileList = []
      this.$emit('uploadSuccess')
    },
    doChangeFile(type, key, val) {
      if (['input_uploader'].includes(this.currentOperation.operation)) {
        if (this.fileList.length > 0) {
          this.$emit('doChangeFile', type, key, val)
          this.$refs.uploadRef.submit()
        }
        return
      }
      this.$emit('doChangeFile', type, key, val)
    }
  }
}
</script>
<style lang="less" scoped>
.image-form {
  .panel-hint {
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
  }

  .upload-demo {
    width: 100%;
  }

  .input-hint {
    font-size: 12px;
    color: #888;
    line-height: 18px;
    word-break: break-all;
  }

  .return-list {
    border-top: 1px solid #dedede;
    margin-top: 5px;
    padding-top: 5px;

    .return-name {
      font-size: 12px;
      font-weight: bold;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      span {
        float: right;
      }
    }
    .return-content {
      line-height: 20px;

      .return-item {
        display: inline-block;
        margin-right: 5px;
        font-size: 12px;
        word-break: break-all;
      }
    }
  }
}
</style>
